import React, { useEffect, useState } from 'react'
import { Tabs } from 'antd';
import Main from '../pages/Main';
import DataS from '../pages/serviceDemo/DataService'
import ShopS from '../pages/serviceDemo/ShopService'
import Takes from '../pages/serviceDemo/TakeService'
import Types from '../pages/serviceDemo/TypeService'
import ShopType from '../pages/shopManage/ShopType';
import Shop from '../pages/shopManage/shop';

import { useLocation, useNavigate } from 'react-router-dom';

const tabsData = [
    { key: '/home/dataS', label: '数据统计', children: <DataS /> },
    { key: '/home/shops', label: '商户项目', children: <ShopS /> },
    { key: '/home/takes', label: '抽成管理', children: <Takes /> },
    { key: '/home/types', label: '类别管理', children: <Types /> },
    { key: '/home/shoptype', label: '数据统计', children: <ShopType /> },
    { key: '/home/shop', label: '商户项目', children: <Shop /> },
]

const ContentTabs = () => {
    const [items, setItems] = useState([{
        key: '/home/', label: '首页', children: <Main />, closable: false,
    }]);
    const [activeKey, setActiveKey] = useState('');
    const { pathname } = useLocation();
    const navigate = useNavigate();

    useEffect(() => {
        // 判断当前标签是否已存在
        const isFind = items.find(item => item.key == pathname);
        console.log(isFind)
        if (!isFind) {
            const selectItem = tabsData.find(item => item.key == pathname);
            setItems([
                ...items,
                selectItem
            ])
        }
        setActiveKey(pathname);
    }, [pathname])


    const onChange = (activeKey) => {
        // setActiveKey(activeKey);
        navigate(activeKey);
    }
    const onEdit = (targetKey) => {
        const targetIndex = items.findIndex((pane) => pane.key === targetKey);
        const newPanes = items.filter((pane) => pane.key !== targetKey);
        if (newPanes.length && targetKey === activeKey) {
            const { key } = newPanes[targetIndex === newPanes.length ? targetIndex - 1 : targetIndex];
            // setActiveKey(key);
            navigate(key);
        }
        setItems(newPanes);
    }
    return (
        <Tabs
            hideAdd
            type="editable-card"
            onChange={onChange}
            onEdit={onEdit}
            activeKey={activeKey}
            items={items}
        />
    )
}

export default ContentTabs